<template>
  <div></div>
</template>

<script lang="ts" setup>
import {ref,reactive} from "vue";
interface RuleForm{
  name:string,
  age:number,
  sex:number
}

const ruleForm = reactive<RuleForm>({
  name:'',
  age:0,
  sex:0
})

const handler = reactive<any>({
  get(target:RuleForm,prop:any,receiver:any){
    console.log('target',target)
    return Reflect.get(target, prop, receiver);
  },
  set(target:any,prop:any,value:any,receiver:any){
    console.log('set target',target)
    console.log('prop',prop);
    return Reflect.set(target, prop, value, receiver);
  }
})

const proxy = new Proxy(ruleForm,handler);

Object.defineProperty(proxy,'each',{
  get() {
    return {
      age:proxy.age,
      name:proxy.name,
      sex:proxy.sex
    }
  },
})
console.log(proxy)
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
